<template>
    <Cascader v-model="value" :data="list" filterable @on-change='change' :transfer='false' :clearable='pClearable' change-on-select></Cascader>
</template>
<script>
    import {GET_REGION} from '../../serves/data-status'
    export default{
        name:'RegionSelect',
        props:{
            pData:{
                type:Array,
                request:true
            },
            pLevel:{
                type:Number,
                default:0
            },
            pDef:{
                type:Boolean,
                default:false
            },
            pClearable:{
                type:Boolean,
                default:true
            },
        },
        data(){
            return{
               value:[],
               list:[],
               levelBefore:[],
            }
        },
        components:{
        },
        mounted(){
            this.list = GET_REGION();
            if(this.list&&this.list[0]){
                let l = parseInt(this.list[0].level);
                let i = 3-l,lv = [];
                while (i>0){
                    lv.push('');
                    i--;
                }
                this.$set(this,'levelBefore',lv);
            }
            if(this.pDef&&this.pData&&this.pData.length==0){
                let arr = [];
                const e_label = (data)=>{
                    if(data&&data.length>0){
                        arr.push(data[0].value);
                        e_label(data[0].children)
                    }
                };
                e_label(this.list,0);
                this.change(arr);
            }else {
                this.value = this.pData;
            }
        },
        methods:{
            change(value){
                if(this.levelBefore.length>0){
                    value = [].concat(this.levelBefore).concat(value)
                }
                this.$emit('on-change',value)
            }
        },
        watch:{
            'pData'(newValue) {
                if(!this.pDef||newValue&&newValue.length>0){
                    this.$set(this,'value',newValue)
                }
            }
        }
    }
</script>